<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工业屏交易平台 - 创建企业</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #2b6de5;
            --secondary-color: #3c8cff;
            --accent-color: #ff7d00;
            --success-color: #34c759;
            --light-bg: #f8f9fa;
            --border-color: #eaeaea;
            --text-primary: #333;
            --text-secondary: #666;
            --text-light: #999;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: var(--text-primary);
            font-size: 14px;
            line-height: 1.5;
            padding-bottom: 20px;
        }
        
        .container {
            max-width: 480px;
            margin: 0 auto;
            background: white;
            min-height: 100vh;
            box-shadow: 0 0 15px rgba(0,0,0,0.05);
            position: relative;
            overflow-x: hidden;
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 15px;
            position: relative;
            z-index: 10;
        }
        
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-weight: bold;
            font-size: 18px;
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 8px;
            font-size: 20px;
        }
        
        .page-title {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            padding: 10px 0;
            margin-top: 10px;
        }
        
        /* 进度指示器 */
        .progress-bar {
            display: flex;
            justify-content: space-between;
            margin: 20px 15px;
            position: relative;
        }
        
        .progress-bar::before {
            content: '';
            position: absolute;
            top: 14px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--border-color);
            z-index: 1;
        }
        
        .progress-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 2;
        }
        
        .step-icon {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: white;
            border: 2px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            font-size: 14px;
            color: var(--text-light);
        }
        
        .progress-step.active .step-icon {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .progress-step.completed .step-icon {
            background: var(--success-color);
            color: white;
            border-color: var(--success-color);
        }
        
        .step-text {
            font-size: 12px;
            color: var(--text-light);
        }
        
        .progress-step.active .step-text {
            color: var(--primary-color);
            font-weight: 500;
        }
        
        /* 表单容器 */
        .form-container {
            padding: 0 15px 20px;
        }
        
        .form-section {
            background: white;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .section-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .section-title i {
            margin-right: 8px;
            color: var(--primary-color);
        }
        
        /* 表单组 */
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .form-label.required::after {
            content: '*';
            color: #ff4d4f;
            margin-left: 4px;
        }
        
        .form-input, .form-select, .form-textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .form-input:focus, .form-select:focus, .form-textarea:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 2px rgba(43, 109, 229, 0.2);
        }
        
        /* 文件上传 */
        .file-upload {
            border: 2px dashed var(--border-color);
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .file-upload:hover {
            border-color: var(--primary-color);
        }
        
        .file-upload i {
            font-size: 32px;
            color: var(--text-light);
            margin-bottom: 10px;
        }
        
        .file-upload-text {
            color: var(--text-secondary);
            margin-bottom: 10px;
        }
        
        .file-upload-hint {
            font-size: 12px;
            color: var(--text-light);
        }
        
        /* 图片预览 */
        .image-preview {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            flex-wrap: wrap;
        }
        
        .preview-item {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }
        
        .preview-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .preview-remove {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: rgba(0,0,0,0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            cursor: pointer;
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            background: var(--primary-color);
            color: white;
            padding: 12px 25px;
            border-radius: 8px;
            font-weight: bold;
            text-decoration: none;
            text-align: center;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        
        .btn:hover {
            background: var(--secondary-color);
            transform: translateY(-2px);
        }
        
        .btn-block {
            display: block;
            width: 100%;
        }
        
        .btn-accent {
            background: var(--accent-color);
        }
        
        .btn-accent:hover {
            background: #ff9500;
        }
        
        .btn-outline {
            background: transparent;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
        }
        
        .btn-outline:hover {
            background: rgba(43, 109, 229, 0.1);
        }
        
        /* 表单提示 */
        .form-tips {
            background: var(--light-bg);
            border-radius: 8px;
            padding: 15px;
            margin: 20px 0;
        }
        
        .tips-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: var(--text-primary);
            display: flex;
            align-items: center;
        }
        
        .tips-title i {
            margin-right: 8px;
            color: var(--primary-color);
        }
        
        .tips-content {
            font-size: 13px;
            color: var(--text-secondary);
        }
        
        .tips-content ul {
            padding-left: 20px;
            margin-top: 10px;
        }
        
        .tips-content li {
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部区域 -->
        <div class="header">
            <div class="top-bar">
                <div class="logo">
                    <i class="fas fa-industry"></i>
                    <span>工业屏交易平台</span>
                </div>
            </div>
            
            <div class="page-title">
                创建企业信息
            </div>
        </div>
        
        <!-- 进度指示器 -->
        <div class="progress-bar">
            <div class="progress-step active">
                <div class="step-icon">1</div>
                <div class="step-text">创建企业</div>
            </div>
            <div class="progress-step">
                <div class="step-icon">2</div>
                <div class="step-text">发布求购</div>
            </div>
        </div>
        
        <!-- 表单内容 -->
        <div class="form-container">
            <!-- 基本信息 -->
            <div class="form-section">
                <div class="section-title">
                    <i class="fas fa-building"></i>
                    <span>企业基本信息</span>
                </div>
                
                <div class="form-group">
                    <label class="form-label required">企业全称</label>
                    <input type="text" class="form-input" placeholder="请输入营业执照上的企业全称">
                </div>
                
                <div class="form-group">
                    <label class="form-label required">企业简称</label>
                    <input type="text" class="form-input" placeholder="请输入企业简称">
                </div>
                
                <div class="form-group">
                    <label class="form-label required">企业类别</label>
                    <select class="form-select">
                        <option value="">请选择企业类别</option>
                        <option value="manufacturer">生产厂商</option>
                        <option value="trader">贸易商</option>
                        <option value="service">服务商</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label class="form-label">融资阶段</label>
                    <select class="form-select">
                        <option value="">请选择融资阶段</option>
                        <option value="seed">种子期</option>
                        <option value="angel">天使轮</option>
                        <option value="a">A轮</option>
                        <option value="b">B轮</option>
                        <option value="c">C轮及以上</option>
                        <option value="ipo">已上市</option>
                        <option value="none">未融资</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label class="form-label">人员规模</label>
                    <select class="form-select">
                        <option value="">请选择人员规模</option>
                        <option value="1-20">1-20人</option>
                        <option value="21-50">21-50人</option>
                        <option value="51-100">51-100人</option>
                        <option value="101-500">101-500人</option>
                        <option value="500+">500人以上</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label class="form-label required">公司性质</label>
                    <select class="form-select">
                        <option value="">请选择公司性质</option>
                        <option value="private">私营企业</option>
                        <option value="state">国有企业</option>
                        <option value="foreign">外资企业</option>
                        <option value="joint">合资企业</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label class="form-label required">公司地址</label>
                    <input type="text" class="form-input" placeholder="请输入公司详细地址">
                </div>
            </div>
            
            <!-- 公司logo -->
            <div class="form-section">
                <div class="section-title">
                    <i class="fas fa-camera"></i>
                    <span>公司Logo</span>
                </div>
                
                <div class="file-upload" onclick="document.getElementById('logoUpload').click()">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <div class="file-upload-text">点击上传公司Logo</div>
                    <div class="file-upload-hint">建议尺寸：300×300px，支持JPG、PNG格式</div>
                    <input type="file" id="logoUpload" accept="image/*" style="display: none;">
                </div>
                
                <div class="image-preview" id="logoPreview"></div>
            </div>
            
            <!-- 营业执照 -->
            <div class="form-section">
                <div class="section-title">
                    <i class="fas fa-file-contract"></i>
                    <span>营业执照</span>
                </div>
                
                <div class="file-upload" onclick="document.getElementById('licenseUpload').click()">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <div class="file-upload-text">点击上传营业执照</div>
                    <div class="file-upload-hint">请上传清晰的企业营业执照照片，支持JPG、PNG格式</div>
                    <input type="file" id="licenseUpload" accept="image/*" style="display: none;">
                </div>
                
                <div class="image-preview" id="licensePreview"></div>
            </div>
            
            <!-- 提示信息 -->
            <div class="form-tips">
                <div class="tips-title">
                    <i class="fas fa-info-circle"></i>
                    <span>温馨提示</span>
                </div>
                <div class="tips-content">
                    <p>完成企业认证后，您可以：</p>
                    <ul>
                        <li>发布产品、求购、活动和合作信息</li>
                        <li>获取更多积分奖励</li>
                        <li>享受企业会员专属权益</li>
                        <li>提升企业在平台的信誉度</li>
                    </ul>
                </div>
            </div>
            
            <!-- 提交按钮 -->
            <button class="btn btn-block" onclick="submitEnterprise()">创建企业并继续</button>
        </div>
    </div>
    
    <script>
        // 文件上传预览
        document.getElementById('logoUpload').addEventListener('change', function(e) {
            handleFileUpload(e, 'logoPreview');
        });
        
        document.getElementById('licenseUpload').addEventListener('change', function(e) {
            handleFileUpload(e, 'licensePreview');
        });
        
        function handleFileUpload(event, previewId) {
            const files = event.target.files;
            const previewContainer = document.getElementById(previewId);
            previewContainer.innerHTML = '';
            
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (!file.type.match('image.*')) continue;
                
                const reader = new FileReader();
                reader.onload = function(e) {
                    const previewItem = document.createElement('div');
                    previewItem.className = 'preview-item';
                    
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    
                    const removeBtn = document.createElement('div');
                    removeBtn.className = 'preview-remove';
                    removeBtn.innerHTML = '<i class="fas fa-times"></i>';
                    removeBtn.onclick = function() {
                        previewContainer.removeChild(previewItem);
                    };
                    
                    previewItem.appendChild(img);
                    previewItem.appendChild(removeBtn);
                    previewContainer.appendChild(previewItem);
                };
                
                reader.readAsDataURL(file);
            }
        }
        
        // 表单提交
        function submitEnterprise() {
            // 这里可以添加表单验证逻辑
            alert('企业信息提交成功！即将跳转到发布求购页面。');
            // 实际应用中这里会跳转到发布求购页面
            window.location.href = 'publish-demand.html';
        }
    </script>
</body>
</html>